import React from 'react';
import styled from 'styled-components';
import { useGame } from '../context/GameContext';
import { GameMode } from '../context/GameContext';

const MenuContainer = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 192, 203, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 100;
`;

const Title = styled.h1`
  color: #fff;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
`;

const Button = styled.button<{ variant?: 'primary' | 'secondary' }>`
  padding: 12px 24px;
  font-size: 1.2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: ${props => props.variant === 'primary' ? '#ff1493' : '#fff'};
  color: ${props => props.variant === 'primary' ? '#fff' : '#ff1493'};
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
  }
`;

const Instructions = styled.div`
  color: #fff;
  text-align: center;
  margin-top: 20px;
  font-size: 1.1rem;

  p {
    margin: 8px 0;
  }
`;

const StartMenu: React.FC = () => {
  const { dispatch } = useGame();

  const handleStart = (mode: GameMode) => {
    dispatch({ type: 'SET_MODE', payload: mode });
    dispatch({ type: 'SET_STATE', payload: 'playing' });
  };

  return (
    <MenuContainer>
      <Title>🐍 Love Snake Game 💕</Title>
      <Button variant="primary" onClick={() => handleStart('single')}>
        单人模式
      </Button>
      <Button onClick={() => handleStart('couple')}>
        双人模式
      </Button>
      <Instructions>
        <p>玩家1: WASD 控制</p>
        <p>玩家2: ↑←↓→ 控制</p>
        <p>P: 暂停游戏</p>
        <p>R: 重新开始</p>
      </Instructions>
    </MenuContainer>
  );
};

export default StartMenu; 